import React, { useEffect } from 'react';
import { Form, Row, Col, Select, Button } from 'dw-mx';
import { Code } from 'dw-mx-extend';

export default function NamedCodeDemo() {

    const [form] = Form.useForm();
    console.log(typeof Code.NAMEDCODE)
    Code.NAMEDCODE.set({
        "XB":[{value:"1",content:"男"},{value:"2",content:"女"}],
        "RW":[{value:"1",content:"未完成"},{value:"2",content:"已完成"},{value:"3",content:"已作废"}],
        "YWLX":[{value:"1",content:"计划建立"},{value:"2",content:"待遇支付"},{value:"3",content:"缴费管理"},{value:"4",content:"交易处理"},{value:"5",content:"交易处理"},{value:"6",content:"匹配处理"},{value:"7",content:"计划管理"},{value:"8",content:"单位管理"},{value:"9",content:"人员管理"},{value:"10",content:"考核管理"}],
        "MZ":[{value:'1',content:'汉族',},{value:'2',content:'朝鲜族'}]
    })
    useEffect(() => {
        // 可以从外部填值
        form.setFieldsValue({
            'xb': '1'
        });
        
    }, []);
    
    const onClick = async (value) => {
        // 可以从外部取值
        console.log(form.getFieldsValue());

        // 可以验证必填项
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
        } catch (errorInfo) {
            // 验证失败
            console.log('Failed:', errorInfo);
        }
    };

    const onChange = (value) => {
        // 可以监听 onchange
        alert(value);
    };

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };
    
    return (
        
        <>
            <Form form={form}
                  {...layout}
                  layout={'horizontal'}>
                <Row>
                    <Col span={8}>
                        <Form.Item label="性别" name="xb" rules={[{ required: true }]}>
                            <Select onChange={onChange} options={Code.NAMEDCODE.get("XB")} allowClear={true} placeholder={"请选择..."}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="任务状态" name="rwzt" rules={[{ required: true }]}>
                            <Select onChange={onChange} options={Code.NAMEDCODE.get("RW")} allowClear={true} placeholder={"请选择..."}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="业务类型" name="ywlx" rules={[{ required: true }]} placeholder={"请选择..."}>
                           
                            <Select onChange={onChange}
                                    allowClear={true} placeholder={"请选择..."}
                                    options={Code.NAMEDCODE.get("YWLX")}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="民族" name="mz" rules={[{ required: true }]} placeholder={"请选择..."}>
                            <Select onChange={onChange}
                                    allowClear={true} placeholder={"请选择..."}//'1:汉族,2:朝鲜族'
                                    options={Code.NAMEDCODE.get("MZ",'1')}/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>

            <Button onClick={onClick}>取值</Button>
        </>
    );
}